<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
    <div class="text-center">
      <h1 class="text-6xl font-bold text-primary-600 mb-4">
        {{ error.statusCode }}
      </h1>
      <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
        {{ error.statusCode === 404 ? '页面未找到' : '出错了' }}
      </h2>
      <p class="text-gray-600 dark:text-gray-400 mb-8">
        {{ error.message || '抱歉，发生了一些错误' }}
      </p>
      <div class="space-x-4">
        <button 
          @click="handleError" 
          class="btn btn-primary"
        >
          返回首页
        </button>
        <button 
          @click="() => clearError()" 
          class="btn btn-secondary"
        >
          重试
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  error: {
    type: Object,
    required: true
  }
})

const handleError = () => clearError({ redirect: '/' })
</script>

